<template>
<el-form ref="form" :model="form" label-width="80px" class="form-container">
  <el-form-item label="姓名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>  
  <el-form-item label="学号">
    <el-input v-model="form.stu_no"></el-input>
  </el-form-item>  
  <el-form-item label="密码">
    <el-input v-model="form.password"></el-input>
  </el-form-item>   
  <el-form-item label="确认密码">
    <el-input v-model="form.confirmPassword"></el-input>
  </el-form-item>  
  <el-form-item label="文件1">
    <el-upload
      class="upload-demo"
      ref="upload1"
      accept="image/*"
      action=""
      multiple
      :limit=1
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
     </el-upload>
  </el-form-item>  
  <el-form-item label="文件2">
    <el-upload
      class="upload-demo"
      ref="upload2"
      accept="image/*,.pdf"
      action=""
      multiple
      :limit=1
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    </el-upload>
  </el-form-item> 
  <el-form-item >
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传服务器</el-button>
  </el-form-item>  
</el-form>
</template>
<script>
import http from '../../utils/http.js'
import urls from '../../utils/urls.js'
export default {
  name: 'upload',
  data() {
    return {
       form: {
          name:"",
          stu_no: '',
          stu_id:'',
          password:"",
          confirmPassword:""
        },
    };
  },
  created() {
    this.getStudent()
  },
  methods: {
    submitUpload() {
      if(this.form.name == ""){
        alert("请输入姓名");
        return
      }
      if(this.form.stu_no == ""){
        alert("请输入学号");
        return
      }
      if(this.form.password == "" || (this.form.password != this.form.confirmPassword)){
        alert("请确认输入密码是否一致")
        return
      }

      var file1 = null;
      if(this.$refs.upload1.uploadFiles[0] == undefined){
        alert("请选择文件1")
        return
      }else{
        file1 = this.$refs.upload1.uploadFiles[0].raw
      }

      var file2 = null;
      if(this.$refs.upload2.uploadFiles[0] == undefined){
        alert("请选择文件2")
        return
      }else{
        file2 = this.$refs.upload2.uploadFiles[0].raw
      }

      const fd = new FormData()
      fd.append('name',this.form.name)
      fd.append('stu_no',this.form.stu_no)
      fd.append('pwd',this.form.password) 

      var user = JSON.parse(localStorage.getItem("user"));
      fd.append('token',user.token)

      fd.append('trans_img', file1)
      fd.append('file_path', file2)

      // 编辑或者添加成绩单
      var url = ""
      if(this.$route.query.source === "add" ){
        url = urls.TranscriptAdd
      }else if(this.$route.query.source === "edit" ){
        url = urls.TranscriptModify
        fd.append('stu_id', this.form.stu_id) 
      }
      http.request(url,fd,this.success)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file)
    },
    success(response){
      this.form = {}
      this.$refs.upload1.uploadFiles = []
      this.$refs.upload2.uploadFiles = []
      alert("上传成功")
      this.$router.push({path:'/StuList'})
    },
    getStudent(){
      // 如果没有stuid，证明不是修改而是添加，不获取学生信息
      if(this.$route.query.stuid === undefined){
        return
      }
      this.form.stu_id = this.$route.query.stuid
      var url = urls.GetStudent      
      var user = JSON.parse(localStorage.getItem("user"));
      var data = {
        token:user.token,
        stu_id:this.form.stu_id
      }
      http.request(url,data,this.getStudentSuccess)
    },
    getStudentSuccess(response){
      this.form.name = response.name
      this.form.stu_id = response.stu_id
      this.form.stu_no = response.stu_no
      this.form.password = response.pwd
      this.form.confirmPassword = response.pwd
    }
  },
};
</script>
<style lang="less" scoped>
.upload-demo{
  width: 30%;
}
.form-container{
  width: 50%;
  margin: 100px auto;
}
</style>